<template>
	<div class="hotlist">
		<div class="title">
			<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png"/>
			<span>本周热门榜单</span>
			<span>全部榜单&gt;</span>
		</div>
		<ul>
			<li v-for=" item in hotlist" :key="item.id">
			   <img :src="item.imgUrl" />
			   <h3>{{item.title}}</h3>
			   <p><span class="mpg-price">¥<em class="mpg-price-num">{{item.num}}</em></span>起</p>
			</li>
			
		</ul>
		
	</div>
</template>

<script>
export default {
	data (){
		return {
			hotlist:[
			   {
			   	id:1,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:2,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:3,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:4,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:5,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:6,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:7,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   },
			   {
			   	id:8,
			   	imgUrl:"http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_150x150_8b349cb3.jpg",
			   	title:"长沙生态动物园",
			   	num:"104.8"
			   }
			]
		}
	}
}
	
	
	
</script>

<style scoped>
	.hotlist  .title{
		font-size: .16rem;
		padding: .12rem .1rem .13rem .1rem;
		
	}
	.hotlist  .title img{
		width: .15rem;
		height: .15rem;
		
	}
	.hotlist  .title span:last-child{
		font-size: .12rem;
		float: right;
		margin-top: 4px;
		
	}
	.hotlist ul {
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		padding-left: .1rem;
		height: 1.6rem;
		
	}
	.hotlist ul li{
		font-size: .12rem;
		text-align: center;
        display: inline-block;
        margin-right:.1rem
	}
	.hotlist ul li:last-child{
		margin-right: 10px;		
	}
	.hotlist ul li img{
		width: 1rem;
		height: 1rem;
	}
	.hotlist ul li .mpg-price {
	    color: #ff8300;
	}
	.hotlist ul li h3 {
	    font-weight: normal;
	    padding: .1rem 0;
	}
	
	
	
	
</style>